import { useEffect, useMemo, useState } from 'react'

export const useObservableState = (source$, initialState) => {

  const source = useMemo(() => {
    if (typeof source$ === 'function') {
      return source$()
    }
    return source$
  }, [source$])

  const [state, setState] = useState(() => {
    if (source) {
      return source.getValue()
    }
    return initialState
  })

  useEffect(() => {
    const sub = source.subscribe((v) => {
      setState(v)
    })
    return () => {
      sub.unsubscribe()
    }
  }, [source])

  return [state, setState]
}
